<template>
<div class="main">
  <div class="block">       
        <div class="qiehuan">
           <el-carousel height="500px" :interval="5000">
              <el-carousel-item v-for="item in bannerImg" :key="item.name">
                <nuxt-link target="_blank" :to="item.link">
                  <div class="bannerImg" :style="{'background-image': 'url(' + item.src + ')'}"></div>
                </nuxt-link>

                 <!-- <div v-show="item.name == 5" class="bannerImg" :style="{'background-image': 'url(' + item.src + ')'}" @click="showrenzheng"></div> -->
              </el-carousel-item>
            </el-carousel>
        </div>

       <div class="duilian">
<transition
  name="custom-classes-transition"
  enter-active-class="animated fadeInDownBig"
  v-on:after-enter="afterEnter"
>
          <!-- leftCard -->
                  <div v-if="showbanner" class="leftCard cardCentent">
                      <div class="leftCard1">
                          <div>
                            <p><span>{{number1}}</span>年度中国互联网金融行业优秀示范企业</p>
                          </div>
                          <div>
                              <p><span>{{number2}}</span>中国金融行业最具潜力企业</p>
                          </div>
                          <div>
                              <p>{{number1}}&amp;{{number2}}</p>
                              <p>安全联盟信誉企业</p>
                          </div>
                      </div>
                      <div class="leftCard2" @click="showcard = !showcard">
                         <div class="xinrenzhuanxiangbox">
                            <p class="xinrenzhuanxiang xinren1">
                            <!-- animated shake -->
                              新人专享
                            </p>
                            <p class="xinrenzhuanxiang xinren2">
                            <!-- animated shake -->
                              新人专享
                            </p>
                         </div>
                          <p class="linghongbao">领取现金红包 ></p>
                      </div>
                      <div>
                          <transition name="fade">
                            <div v-if="showcard" class="telmeform">
                                  <div class="inputbox">
                                    <input type="text" v-model="name" placeholder="请输入姓名">
                                    <input type="text" v-model="phone" placeholder="请输入手机号">
                                  </div>
                                  <div @click="subcontact">
                                    提交
                                  </div>
                            </div>
                          </transition>
                      </div>
                </div>
              <!--end leftCard -->
 
 </transition>
  <transition
  name="custom-classes-transition"
  enter-active-class="animated fadeInDownBig">  
          <!-- rightCard -->
           <div v-if="showbanner" class="rightCard cardCentent">
                <div class="rightCard1">
                    <h1>天沁财富·品牌资质</h1>
                   <div class="detail">
                     <div>
                       <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiangzhangxunzhang-copy"></use>
                      </svg>
                     </div>
                      <div> 
                        <!-- <h2>挂牌机构</h2>
                        <p>独立基金销售机构</p> -->
                        <h2>发现未来</h2>
                        <p>洞察市场波动</p>
                      </div>
                   </div>
                      

                    <div class="detail">
                     <div>
                       <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-anquan-copy"></use>
                      </svg>
                     </div>
                      <div> 
                        <!-- <h2>安全银行</h2>
                        <p>安全监管招商银行</p> -->
                        <h2>股权时代来临</h2>
                        <p>如何选中下一个独角兽</p>
                      </div>
                   </div>


                  <div class="detail">
                     <div>
                       <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-weibiaoti16-copy"></use>
                        </svg>
                     </div>
                      <div> 
                        <h2>研究团队</h2>
                        <p>明星研究团队&amp;十年深入研究</p>
                      </div>
                   </div>

                </div>

                <div class="linkbox">
                    <p>
                      <!-- trust -->
                      <!-- <nuxt-link target="_blank" to="/trust" rel="nofollow"> -->
                      <a>
                           <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-rongziguanli"></use>
                          </svg>
                          <span>天沁投研</span>
                      </a>
                         
                      <!-- </nuxt-link> -->
                      <!-- equity -->
                      <!-- <nuxt-link target="_blank" to="/" rel="nofollow"> -->
                         <a>
                            <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-gupiao"></use>
                            </svg>
                            <span>热点资讯</span>
                         </a>
                      <!-- </nuxt-link> -->
                    </p>
                    <p>
                      <!-- advisory -->
                        <!-- <nuxt-link target="_blank" to="/" rel="nofollow"> -->
                          <a>
                            <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-ai-new"></use>
                            </svg>
                            <span>财经早餐</span>
                          </a>
                        
                        <!-- </nuxt-link> -->
                        <!-- <nuxt-link target="_blank" to="/research"> -->
                       <!-- <nuxt-link target="_blank" to="/add/add3"> -->
                          <a>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-celvezhihangpeizhi"></use>
                            </svg>
                            <span>投资学堂</span>
                          </a>
                       <!-- </nuxt-link> -->
                        <!-- </nuxt-link> -->
                      </p>                    
                </div>
            </div> 
           <!--end  rightCard -->
       </transition>
        </div>

       
  </div>
</div>
</template>
<script>
var timedong;
var timedong2;
import api from "../static/js/api.js";
export default {
  data() {
    return {
      number1: 2000,
      number2: 2000,
      name: "",
      phone: "",
      bannerImg: [
       
        {
          name: "1",
          src: "http://img3.tqcaifu.com/tudi/tudi.png",
          link: "/add/add8"
        },
        {
          name: "5",
          src: "http://img3.tqcaifu.com/img/19.jpg",
          link: "/"
        },
        // {
        //   name: "5",
        //   src: "http://img3.tqcaifu.com/img/15.jpg",
        //   link: "/add/add5"
        // },
        // {
        //   name: "1",
        //   src: "http://img3.tqcaifu.com/img/10.jpg",
        //   link: "/product/52"
        // },
        // {
        //   name: "2",
        //   src: "http://img3.tqcaifu.com/img/9.jpg",
        //   link: "/product/37"
        // },
        {
          name: "3",
          src: "http://img3.tqcaifu.com/img/8.jpg",
          link: "/post/1001"
        },
        {
          name: "4",
          src: "http://img3.tqcaifu.com/img/3.jpg",
          link: "/add/add4"
        }
      ],
      showcard: false,
      showbanner: false
    };
  },
  methods: {
    showrenzheng(){
      if(!this.$store.state.nologin){
        api
          .contactUs({
            phone: this.$store.state.userinfo.mobile,
            name: "首页新人banner预约咨询"
          })
          .then(res => {
            if (res.code == 1) {
              this.$alert('预约成功，稍后会有理财师与您联系，谢谢！');
            } else {
              this.$alert(res.msg);
            }
          });
      }else{
         this.$store.commit("changeshowlogin",true)
      }
     
    },
    afterEnter() {
      timedong = setInterval(this.add, 30);
      timedong2 = setInterval(this.add2, 30);
    },
    add() {
      this.number1++;
    },
    add2() {
      this.number2++;
    },
    subcontact() {
      if (this.name == "") {
        this.$alert("请填写您的姓名！");
        return;
      } else if (!/^1\d{10}$/.test(this.phone)) {
        this.$alert("请正确填写您手机号！");
        return;
      } else {
        api.contactUs({ phone: this.phone, name: this.name }).then(res => {
          if (res.code == 1) {
            this.$alert(res.msg);
            this.showcard = false;
          } else {
            this.$alert(res.msg);
          }
        });
      }
    }
  },
  watch: {
    number1(oldVal, newVal) {
      if (newVal == 2016) {
        clearInterval(timedong);
      }
    },
    number2(oldVal, newVal) {
      if (newVal == 2017) {
        clearInterval(timedong2);
      }
    }
  },
  created: function() {},
  mounted: function() {
    this.showbanner = true;
  }
};
</script>
    <!-- animated shake -->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.inputbox {
  width: 170px;
}
.telmeform {
  background: #b41d24;
  opacity: 0.9;
  height: 120px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 286px;
  position: relative;
  top: -120px;
  left: 260px;
}
.telmeform input {
  width: 160px;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  padding-left: 10px;
}
.telmeform input:nth-child(2) {
  margin-top: 10px;
}
.telmeform div:nth-child(2) {
  height: 70px;
  width: 80px;
  background: white;
  text-align: center;
  line-height: 70px;
  font-size: 20px;
  color: #666;
  margin-left: 32px;
}
.fade-enter-active,
.fade-leave-active {
  /* transition: opacity 0.5s; */
  transition: all .4s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0; 
  width: 0px;
}

.linkbox a span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #333;
}
.linkbox p {
  text-align: center;
  margin-top: 10px;
}
.linkbox .icon {
  color: #333;
  font-size: 30px;
  margin-top: 14px;
  -webkit-animation: rotateplane 3s infinite ease-in-out;
  animation: rotateplane 3s infinite ease-in-out;
}
.linkbox a:hover .icon {
  color: #cd9c54;
}
.linkbox a:hover span {
  color: #cd9c54;
}

.linkbox p a:nth-child(2) {
  margin-left: 10px;
}
.linkbox a {
  display: inline-block;
  color: #333;
  background: rgba(255, 255, 255, 0.9);
  width: 125px;
  height: 80px;
}
.detail h2 {
  font-size: 20px;
  color: #333;
  font-weight: normal;
}

.detail p {
  font-size: 14px;
  color: #333;
  font-weight: normal;
  line-height: 1.2;
  margin-top: 6px;
}
.detail div:nth-child(1) {
  width: 45px;
}
.detail div:nth-child(2) {
  width: 160px;
}
.detail {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon {
  color: #b41d24;
  font-size: 30px;
  transition: all 0.5s ease;
}
.rightCard1 {
  background: rgba(255, 255, 255, 0.9);
  height: 300px;
  padding: 20px;
  box-sizing: border-box;
}
.rightCard1 h1 {
  color: #cd9c54;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
.leftCard1 div {
  height: 120px;
  font-size: 18px;
  border-bottom: 1px solid #cd9c54;
  overflow: hidden;
}
.leftCard1 div p {
  color: #333333;
  width: 190px;
  margin: 30px auto 0;
  text-align: center;
  line-height: 1.3;
}
.leftCard1 div:nth-child(3) p:first-child {
  font-size: 22px;
  color: #cd9c54;
  font-weight: 600;
}
.leftCard1 div:nth-child(3) p:nth-child(2) {
  margin: 0 auto;
}
.leftCard1 div span {
  font-size: 22px;
  color: #cd9c54;
  font-weight: 600;
}
.leftCard1 {
  height: 360px;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
}
.leftCard2 {
  background: #b41d24;
  opacity: 0.9;
  height: 120px;
  overflow: hidden;
  cursor: pointer;
}
.xinrenzhuanxiangbox {
  height: 86px;
  overflow: hidden;
  position: relative;
  transition: 3s;
}
.xinrenzhuanxiang{
  border-radius: 4px;
  text-align: center;
  width: 160px;
  height: 46px;
  line-height: 46px;
  background: white;
  color: #b41d24;
  font-size: 24px;
  position: absolute;
  top: 50%;
  margin-top: -23px; 
  left: 50%;
  margin-left: -80px;
}
.xinren1{
  
}
.xinren2{

}

@keyframes shakes1 {
  from {
     transform:rotateY(180deg);
  }
  to {
     transform:rotateY(0deg);
  }
}

.linghongbao {
  color: white;
  font-size: 16px;
  text-align: center;
}
.duilian {
  width: 1200px;
  margin: 0 auto;
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -600px;
}
.main {
  background: white;
  border-top: 1px solid #cd9c54;
}
.block {
  position: relative;
}

.block .cardCentent {
  box-sizing: border-box;
  position: absolute;
  height: 480px;
  width: 260px;
  z-index: 999;
  top: 0px;
  font-size: 22px;
  font-weight: bolder;
}

.block .leftCard {
  left: 0;
}
.block .rightCard {
  right: 0;
  width: 260px;
}
.bannerImg {
  background-repeat: no-repeat;
  background-size: contain contain;
  background-position: center center;
}
.bannerImg {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

@-webkit-keyframes rotateplane {
  0% {
    -webkit-transform: perspective(220px);
  }
  50% {
    -webkit-transform: perspective(220px) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(220px) rotateY(180deg);
  }
}
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateY(0);
    -webkit-transform: perspective(220px) rotateY(0);
  }
  50% {
    transform: perspective(120px) rotateY(179.9deg);
    -webkit-transform: perspective(220px) rotateY(179.9deg);
  }
  100% {
    transform: perspective(120px) rotateY(360deg);
    -webkit-transform: perspective(220px) rotateY(360deg);
  }
}
</style>
